<template>
  <el-dialog
    :visible.sync="showBussPass"
    width="400px"
    top="20vh"
    :append-to-body="true"
    :close-on-click-modal="false"
    :show-close="false"
    :close-on-press-escape="false"
  >
    <div slot="title" class="title_close">
      <!-- 设置交易密码 -->
      <div class="title" v-if="isResetPass == true">
        {{ $t("inccom.buss_password.56hu6aqfpv40") }}
      </div>
      <div class="title" v-else>
        {{ $t("inccom.buss_password.56hu6aqfr4g0") }}
      </div>
      <img
        src="@/assets/img/icon_gb1.png"
        class="close"
        @click="hideSetPass(false)"
      />
    </div>
    <!-- 输入新密码 -->
    <div class="phone_captcha">
      <!-- 密码 -->
      <PasswordInput
        @passwordChange="(val) => (password = val)"
        :placeholderContent="$t('inccom.buss_password.56hu6aqfrfc0')"
      >
        <h2>{{ $t("inccom.buss_password.56hu6aqfr4g0") }}</h2>
      </PasswordInput>
      <PasswordInput
        @passwordChange="(val) => (repassword = val)"
        :placeholderContent="$t('inccom.buss_password.56hu6aqfrwc0')"
      >
        <h2>{{ $t("inccom.buss_password.56hu6aqfro40") }}</h2>
      </PasswordInput>
      <button @click="setBussPassword" class="submit">
        {{ $t("m.determine") }}
      </button>
    </div>
  </el-dialog>
</template>

<script>
import { post_tradePwd } from "@/assets/js/API/user.js";
import PasswordInput from "@/components/common/PasswordInput.vue";
export default {
  components: {
    PasswordInput,
  },
  props: {
    showBussPass: Boolean,
    isResetPass: Boolean,
  },
  data() {
    return {
      lang: "",
      password: "",
      repassword: "", // 确认密码
    };
  },
  created() {},
  mounted() {
    this.lang = localStorage.getItem("lang");
  },
  methods: {
    // 设置交易密码
    async setBussPassword() {
      let reg = /^[0-9]{6}$/;
      if (this.password == "")
        return this.$message.error(this.$i18n.t("m.inputPsd"));
      if (this.repassword == "")
        return this.$message.error(this.$i18n.t("m.confirmationPsd"));
      if (!reg.test(this.password))
        return this.$message.error(
          this.$t("inccom.buss_password.56hu6aqfs540")
        );
      if (this.repassword !== this.password)
        return this.$message.error(this.$i18n.t("m.twoPasswords"));
      const res = await post_tradePwd({
        password: this.password,
        repassword: this.repassword,
      });
      if (res.code != 1) return this.$message.error(res.msg);
      this.$store.dispatch("SetTradePass", 1);
      this.hideSetPass(true);
      return this.$message.success(res.msg);
    },
    hideSetPass(flag) {
      this.password = "";
      this.repassword = "";
      this.$emit("closeBussPassDia", flag);
    },
  },
};
</script>
<style lang="less">
.phone_captcha {
  h2 {
    color: @fbSix;
    font-size: 12px;
    padding-top: 8px;
  }
  .leftfix {
    padding-left: 0;
    padding-right: 0;
    .border {
      margin-top: 12px;
      .password_input {
        .close_icon {
          height: 22px;
          margin-top: 10px;
        }
        .el-input__inner {
          border: none;
          background-color: @LightBorderLine;
          color: @fff;
        }
      }
      .phone_input {
        border: 1px solid @fbSix;
        border-radius: 3px;
        color: @fff;
      }
    }
  }
  .submit {
    width: 100%;
    background-color: @hoverColor;
    height: 40px;
    border-radius: 3px;
    border: 1px solid transparent;
    color: @fff;
    font-size: 12px;
    margin-top: 30px;
  }
}
</style>